<template class="big">
	<scroll-view style=" height: 100vh" @scrolltolower="lowerBottom" scroll-y="true" refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<Swiper></Swiper>
		<Tag></Tag>
		<view class="cu-item">
			<view class="action" style="display: flex;justify-content: flex-end;padding-right: 3vw;">
				<switch class="switch-sex" @change="SwitchSex" :class="skin ? 'checked' : 'right'"
					:checked="skin ? true : false">
				</switch>
			</view>
		</view>
		<view v-if="skin == true">
			<van-empty description="暂无帖子" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="list.length == 0" />
			<div class="mesList" v-for="(item, index) in list" :key="item.userid" v-else>
				<div class="mes-card" @click="showdetail(item.mesid)">
					<div class="card-top">
						<div
							style="display: flex;width:100%; align-items: center;justify-content: end;padding-right: 10px;padding-left: 10px;">
							<div class="tags">
								<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
								</view>
							</div>

						</div>
					</div>
					<div style="padding-left: 5px;padding-right: 5px;" class="card-body px-2">
						<van-image v-if="item.imgList[0]" width="100%" height="15rem" fit="cover" position="center"
							:src='item.imgList[0]' />
						<div style="font-size: 20px; color: #212121; font-weight: 600; padding-top: {{item.imgList[0] ? '20px' : '0px'}};"
							class="title">
							{{ item.title }}
						</div>

						<view style="padding-top: 10px;" class="content">
							{{ item.content }}
						</view>
					</div>

					<div class="card-bottom">
						<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
							<van-image round width="2rem" height="2rem" :src='item.img' />
							<span style="margin-left: 5px;">{{ item.Username }}</span>
						</div>
						<view style="color: #9a9a9a;" class="time">
							{{ item.time.substring(0, 10) }}
						</view>
					</div>
				</div>
			</div>
		</view>
		<view v-else>
			<van-empty description="暂无帖子" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="rec_list.length == 0" />
			<div class="mesList" v-for="(item, index) in rec_list" :key="item.userid" v-else>
				<div class="mes-card" @click="showdetail(item.mesid)">
					<div class="card-top">
						<div
							style="display: flex;width:100%; align-items: center;justify-content: end;padding-right: 10px;padding-left: 10px;">
							<div class="tags">
								<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
								</view>
							</div>

						</div>
					</div>
					<div style="padding-left: 5px;padding-right: 5px;" class="card-body px-2">
						<van-image v-if="item.imgList[0]" width="100%" height="15rem" fit="cover" position="center"
							:src='item.imgList[0]' />
						<div style="font-size: 20px; color: #212121; font-weight: 600; padding-top: {{item.imgList[0] ? '20px' : '0px'}};"
							class="title">
							{{ item.title }}
						</div>

						<view style="padding-top: 10px;" class="content">
							{{ item.content }}
						</view>
					</div>

					<div class="card-bottom">
						<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
							<van-image round width="2rem" height="2rem" :src='item.img' />
							<span style="margin-left: 5px;">{{ item.Username }}</span>
						</div>
						<view style="color: #9a9a9a;" class="time">
							{{ item.time.substring(0, 10) }}
						</view>
					</div>
				</div>
			</div>
		</view>
	</scroll-view>

</template>
<script>
import Swiper from "@/modul/Home/Swiper.vue"
import Tag from "@/modul/Home/Tag.vue"
import {
	showAllpost,
	getreclist
} from '@/store/api.js'
import {
	truncateString
} from '@/store/constants.js'
export default {
	onPageScroll({
		scrollTop
	}) {
		console.log('监听页面滚动');

		if (scrollTop === 0) console.log('页面触顶');
	},
	components: {
		Swiper,
		Tag
	},
	name: 'meslist',
	data() {
		return {
			triggered: false,
			rec_list: [],
			total: 0,
			list: [],
			page: 1,
			skin: true,
			count: 1
		}
	},
	mounted() {
		let data = {
			pageNum: this.page,
			pageSize: 20
		}
		getreclist(this.count).then(res => {
			console.log('看！！！')
			console.log(res)
			this.count = this.count + 20
			res.data.data.forEach(item => {
				let types = ''
				item.tags.forEach(it => {
					types = types + '#' + it.name
				})
				this.rec_list.push({
					img: item.posterAvatar,
					title: item.title,
					content: truncateString(item.content),
					userid: item.posterId,
					mesid: item.id,
					time: item.beginTime,
					types: types,
					imgList: this.processString(item.content).images.slice(0, 3)
				})
			})
		}).catch(err => {
			console.log(err)
		})
		showAllpost(data).then((res) => {
			this.page++
			console.log(res)
			this.total = res.data.data.total
			res.data.data.rows.forEach(item => {
				let types = ''
				item.tags.forEach(it => {
					types = types + '#' + it.name
				})
				this.list.push({
					img: item.posterAvatar,
					title: item.title,
					content: truncateString(item.content),
					userid: item.posterId,
					mesid: item.id,
					time: item.beginTime,
					types: types,
					imgList: this.processString(item.content).images.slice(0, 3)
				})
			})
		})
	},
	methods: {
		onRestore() {
			console.log('onRestore')
			uni.$emit('flushed', true)
			this.triggered = false
			this.rec_list = []
			this.total = 0
			this.list = []
			this.page = 1
			this.skin = true
			this.count = 1
			this.triggered = true
			let data = {
				pageNum: this.page,
				pageSize: 20
			}
			getreclist(this.count).then(res => {
				console.log('看！！！')
				console.log(res)
				this.count = this.count + 20
				res.data.data.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.rec_list.push({
						img: item.posterAvatar,
						Username: item.posterUsername,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types,
						imgList: this.processString(item.content).images.slice(0, 3)
					})
				})
			}).catch(err => {
				console.log(err)
			})
			showAllpost(data).then((res) => {
				this.page++
				console.log(res)
				this.total = res.data.data.total
				res.data.data.rows.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						Username: item.posterUsername,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types,
						imgList: this.processString(item.content).images.slice(0, 3)
					})
				})
			})
			setTimeout(() => {
				console.log('刷新完成')
				this.triggered = false
			}, 1000)
		},
		SwitchSex(e) {
			this.skin = e.detail.value
		},
		processString(inputString) {
			const parts = inputString.split('**/img/**');

			// 获取文本部分和图片 URL 部分
			const textPart = parts[0];
			const imageUrls = parts[1] ? parts[1].split(',') : [];

			// 将图片 URL 部分存储为数组
			const imagesArray = imageUrls.map(url => url.trim());
			//获取评分栏
			const part2 = textPart.trim().split('**/rank/**')
			let newtext = part2[0]
			// let rankpart=part2[1]?JSON.parse(part2[1]):''
			// console.log(part2[1])
			// console.log(part2[0])
			// 返回处理后的结果，图片部分作为数组返回
			return {
				// rank:rankpart,//评分部分
				text: newtext.trim(), // 去除文本部分两端的空格
				images: imagesArray // 图片 URL 部分作为数组返回
			};

		},
		lowerBottom() {
			console.log('下拉刷新')
			console.log(this.skin)
			if (this.skin == true) {
				if (this.total > this.list.length) {
					let data = {
						pageNum: this.page,
						pageSize: 20
					}
					console.log(data)
					showAllpost(data).then((res) => {
						this.page++
						console.log(res)
						res.data.data.rows.forEach(item => {
							let types = ''
							item.tags.forEach(it => {
								types = types + '#' + it.name
							})
							this.list.push({
								img: item.posterAvatar,
								title: item.title,
								content: truncateString(item.content),
								userid: item.posterId,
								mesid: item.id,
								time: item.beginTime,
								types: types,
								imgList: this.processString(item.content).images.slice(0, 3)
							})
						})
					})
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: "none",
						duration: 1000
					})
				}
			} else {
				getreclist(this.count).then(res => {
					console.log('看！！！')
					console.log(res)
					if (res.data.data == []) {
						uni.showToast({
							title: '没有更多了',
							icon: "none",
							duration: 1000
						})
						return
					}
					this.count = this.count + 20
					res.data.data.forEach(item => {
						let types = ''
						item.tags.forEach(it => {
							types = types + '#' + it.name
						})
						this.rec_list.push({
							img: item.posterAvatar,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime,
							types: types,
							imgList: this.processString(item.content).images.slice(0, 3)
						})
					})
				}).catch(err => {
					console.log(err)
				})
			}
		},
		showdetail(mesid) {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
			})
		}
	}
}
</script>
<style scoped lang="less">
.card-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;

}

.mes-card {
	overflow: hidden;
	position: relative;
	text-align: left;
	border-radius: 0.5rem;
	background-color: #fff;
	width: 100%;
	box-shadow: 7px 7px 14px #d0d0d0,
		-7px -7px 14px #f0f0f0;
}

.card-bottom {
	padding: 10px;
	align-items: center;


	width: 100%;
	display: flex;
	justify-content: space-between;
}

.time {}

.mesList {
	padding: 20px;
	padding-left: 5px;
	padding-right: 10px;
	display: flex;
	justify-content: center;

}

.right {
	color: aqua;
}

.switch-sex::after {
	content: "全部";
	font-size: 10px;
	/* 设置内容的大小 */
	color: blue;
	/* 设置内容的颜色 */
}

.switch-sex::before {
	content: "推荐";
	font-size: 10px;
	/* 设置内容的大小 */
	color: blue;
	/* 设置内容的颜色 */
}

.showImg {
	margin-top: 2vh;
	max-width: 25vw;
	// height: 20vw;
	// max-height: auto;
	margin-right: 1vh;
	margin-bottom: 2vh;
}

.timeAndType {
	display: flex;
	font-size: 10px;
	justify-content: flex-end;
	align-items: center;
	margin-right: 2vw;
}

.time {
	margin-right: 4vw;
}

.meslist {
	position: relative;
	z-index: 1;
	// margin-block-start: 20rpx;
	padding: 18rpx;
}

/* 单个卡片 */
.mes {
	padding-bottom: 5px;
	z-index: 5;
	display: flex;
	margin-top: 2rpx;
	border-radius: 10rpx;
	padding-top: 2vh;
	box-shadow: 3px 3px 5px 3px #888888;
	background-color: #fefefe;
	margin-left: 5rpx;
	margin-right: 5rpx;
}

.headimg {
	width: 225rpx;
	height: 100rpx;
	border-radius: 75%;
	margin-left: 15rpx;
}

.content {
	width: 580rpx;
	font-size: 25rpx;
	-webkit-line-clamp: 2;
	margin-left: 15rpx;
}

.title {
	font-weight: 700;
	font-size: 30rpx;
	margin-left: 15rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}
</style>